<template>
  <!-- 控制按钮 -->
  <el-button type="primary" @click="toggleDrawer" class="toggle-btn" :class="{ 'is-open': isOpen }">
    <Icon :icon="isOpen ? 'ep:arrow-right' : 'ep:arrow-left'" />
  </el-button>

  <!-- 抽屉容器 -->
  <div class="drawer-wrapper" :class="{ 'is-open': isOpen }">
    <!-- 抽屉内容 -->
    <div class="drawer-content">
      <!-- 抽屉头部 -->
      <div class="drawer-header">
        <h3 class="header-title">话术详情</h3>
        <el-button class="close-btn" type="danger" text @click="toggleDrawer">
          <Icon icon="ep:close" />
        </el-button>
      </div>
      <!-- 抽屉主体 -->
      <div class="drawer-body">
        <div class="script-info h-full">
          <div class="script-info__content h-full flex flex-col gap-row-2">
            <span>话术简称</span>
            <el-input :value="scriptInfo.name" disabled />
            <span>话术模板</span>
            <el-input :value="scriptInfo.info" type="textarea" :rows="10" resize="none" disabled />
            <span>回答方式</span>
            <el-input
              :value="formatIsReply(scriptInfo.isReply as unknown as ReplyTypes)"
              disabled
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Icon } from '@/components/Icon'
import { formatIsReply } from '@/utils/formatter'
import { useFlowStore } from '@/store/modules/flow'
import * as _ from 'lodash-es'
import { ReplyTypes } from '@/types'

const isOpen = ref(true)
const toggleDrawer = () => {
  isOpen.value = !isOpen.value
}

const store = useFlowStore()

const DefaultInfo = () => ({
  name: '',
  info: '',
  isReply: ''
})

const scriptInfo = reactive(DefaultInfo())

watch(
  () => store.currentNode,
  (newNode) => {
    if (newNode?.data?.type === 'inout' || newNode === null) {
      _.assign(scriptInfo, DefaultInfo())
      return
    }
    _.assign(scriptInfo, newNode.data.scriptInfo)
  }
)
</script>

<style lang="less" scoped>
.el-button {
  margin: 0;
  padding: 8px;
}

/* 按钮定位优化 */
.toggle-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  &:hover {
    transform: translateY(-50%) scale(1.05);
  }

  &.is-open {
    transform: translateX(-300px) translateY(-50%);
  }
}

// 抽屉容器
.drawer-wrapper {
  position: absolute;
  right: -320px;
  top: 0;
  width: 300px;
  height: 100%;

  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;

  z-index: 2;

  &.is-open {
    transform: translateX(-320px);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.08);
  }

  .drawer-content {
    height: 100%;
    background: var(--el-bg-color);
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    border-radius: 0 8px 8px 0;

    /* 头部高度精确控制 */
    .drawer-header {
      padding: 16px 20px;
      border-bottom: 1px solid var(--el-border-color-light);
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--el-fill-color-light);
      border-radius: 0 8px 0 0;

      .header-title {
        margin: 0;
        font-size: 18px;
        font-weight: bolder;
        color: var(--el-text-color-primary);
      }

      .close-btn {
        padding: 6px;
        &:hover {
          background-color: var(--el-color-danger-light-9);
        }
      }
    }

    /* 内容区域高度计算 */
    .drawer-body {
      flex: 1;
      overflow: auto;
      padding: 16px 20px;
      border-radius: 0 0 8px 0;
    }
  }
}
</style>
